import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Snow from '@tuya-miniapp/icons/dist/svg/Snow';
import Airplane from '@tuya-miniapp/icons/dist/svg/Airplane';

import React, { useState } from 'react';
import { Image } from '@ray-js/ray';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
import Strings from '@/i18n';
import res from '../../../public/lampImage';
import styles from './index.module.less';

export function BottomBar({ active = 'home', onChange }) {
  return (
    <Tabbar
      active={active}
      activeColor="#000"
      inactiveColor="rgba(0, 0, 0, 0.4)"
      onChange={e => onChange(e.detail)}
    >
      <TabbarItem
        slot={{
          icon: <Image src={res.home} className={styles.home} />,
          iconActive: <Image src={res.home_active} className={styles.home} />,
        }}
        name="home"
      >
        {Strings.getLang('tab_home')}
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Image src={res.sound} className={styles.sound} />,
          iconActive: <Image src={res.sound_active} className={styles.sound} />,
        }}
        name="sound"
      >
        {Strings.getLang('tab_sound')}
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Image src={res.time} className={styles.time} />,
          iconActive: <Image src={res.time_active} className={styles.time} />,
        }}
        name="time"
      >
        {Strings.getLang('tab_time')}
      </TabbarItem>
      <TabbarItem
        slot={{
          icon: <Image src={res.alarm} className={styles.alarm} />,
          iconActive: <Image src={res.alarm_active} className={styles.alarm} />,
        }}
        name="alarm"
      >
        {Strings.getLang('tab_alarm')}
      </TabbarItem>
    </Tabbar>
  );
}
